<template>
  <div id="actor"
       v-loading="loading"
       element-loading-text="加载中..."
       element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(0, 0, 0, 0.8)">
    <header>
      <div class="left">
        <el-button type="primary"
                   size="medium"
                   icon="el-icon-plus"
                   @click="visible = true"
                   style="padding: 10px 12px;">新增</el-button>
        <el-input size="medium"
                  placeholder="关键字"
                  style="margin:0 5px;"
                  v-model="searchText"></el-input>

        <!-- <el-button icon="el-icon-search"
                   style="padding: 10px 12px;"
                   size="medium">搜索</el-button> -->
        <el-button-group style="display:flex">
          <el-button icon="el-icon-search"
                     style="padding: 10px 12px;"
                     @click="loadData"
                     size="medium">搜索</el-button>
          <!-- <el-button icon="el-icon-arrow-down"
                     style="padding: 10px 12px;"
                     size="medium"></el-button> -->
        </el-button-group>
      </div>
      <!-- <el-button-group>
        <el-button icon="el-icon-edit"
                   style="padding: 10px 12px;"
                   size="medium">导入</el-button>
        <el-button icon="el-icon-share"
                   style="padding: 10px 12px;"
                   size="medium">导出</el-button>
      </el-button-group> -->
      <batchTag :number="selections.length"
                @delete="handleDelete"></batchTag>
    </header>
    <main>
      <el-table :data="tableData"
                header-cell-class-name="table-header"
                border
                @sort-change="handleSort"
                @selection-change="handleSelectionChange"
                style="width: 100%">
        <el-table-column type="selection"
                         align="center"
                         width="55"></el-table-column>
        <!-- <el-table-column type="index"
                         align="center"
                         label="序号"
                         width="55">
        </el-table-column> -->
        <el-table-column type="index"
                         label="序号"
                         width="50"
                         align="center"
                         :index="computeTableIndex" />
        <el-table-column prop="account"
                         align="center"
                         sortable="custom"
                         label="账号">
        </el-table-column>
        <!-- <el-table-column prop="password"
                         sortable
                         align="center"
                         width="100"
                         label="密码">
        </el-table-column> -->
        <el-table-column prop="name"
                         sortable="custom"
                         align="center"
                         label="姓名">
        </el-table-column>
        <el-table-column prop="unit"
                         sortable="custom"
                         align="center"
                         label="单位">
        </el-table-column>
        <el-table-column prop="department"
                         sortable="custom"
                         align="center"
                         label="部门">
        </el-table-column>
        <el-table-column prop="phone"
                         sortable="custom"
                         align="center"
                         label="电话">
        </el-table-column>
        <el-table-column prop="email"
                         sortable="custom"
                         align="center"
                         label="邮箱">
        </el-table-column>
        <el-table-column prop="permission"
                         align="center"
                         width="130"
                         label="权限">
          <template slot-scope="scope">
            <span v-if="!scope.row.permission"></span>
            <div v-else>
              <span v-for="item in scope.row.permission"
                    :key="item"
                    style="margin:0 1px">
                {{item===1?'前台':item===2?'后台':'用户管理'}}
              </span>
              <!-- <el-tag v-for="item in scope.row.permission"
                      style="margin:0 1px"
                      size="mini"
                      :key="item">
                {{item===1?'前台':item===2?'后台':'用户管理'}}
              </el-tag> -->
            </div>

          </template>
        </el-table-column>
        <el-table-column align="center"
                         width="80"
                         label="操作">
          <template slot-scope="scope">
            <!-- <el-button type="text">详情</el-button> -->
            <el-button type="text"
                       @click="handleEdit(scope.row)">编辑</el-button>
            <!-- <el-button type="text"
                       @click="$router.push('add')">新增</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </main>
    <footer>
      <el-pagination background
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page.sync="pagination.page"
                     :page-size="pagination.size"
                     :total="pagination.total"
                     :page-sizes="[10, 20, 30]"
                     layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </footer>
    <el-dialog :visible.sync="visible"
               @close="resetForm"
               title="用户新增/编辑"
               width="450px">
      <el-form label-width="40px"
               style="overflow: hidden;">
        <el-form-item label="账号">
          <el-input v-model="addObj.account"></el-input>
          <!-- <el-select v-model="addObj.type"
                     style="width:100%">
            <el-option label="姓名"
                       value="1"></el-option>
            <el-option label="单位"
                       value="2"></el-option>
            <el-option label="部门"
                       value="3"></el-option>
            <el-option label="摄影师"
                       value="4"></el-option>
          </el-select> -->
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="addObj.password"
                    type="password"
                    show-password
                    style="width:100%" />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="addObj.name"></el-input>
        </el-form-item>
        <el-form-item label="单位">
          <el-input v-model="addObj.unit"></el-input>
        </el-form-item>
        <el-form-item label="部门">
          <el-input v-model="addObj.department"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="addObj.phone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="addObj.email"></el-input>
        </el-form-item>
        <el-form-item label="权限">
          <el-checkbox-group v-model="addObj.permission">
            <el-checkbox :label="1">前台</el-checkbox>
            <el-checkbox :label="2">后台</el-checkbox>
            <el-checkbox :label="3">用户管理</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <footer>
        <el-button type="primary"
                   size="small"
                   @click="resetPassword">重置密码</el-button>
        <el-button type="primary"
                   size="small"
                   @click="handleSubmit">提交</el-button>
      </footer>
    </el-dialog>
  </div>
</template>

<script>
import batchTag from '../show/component/batchTag'
import * as API from '../../api/user'

export default {
  name: 'UserAdd',
  components: { batchTag },
  data() {
    return {
      loading: false,
      checkList: [],
      selections: [],
      searchText: '',
      visible: false,
      tableData: [],
      pagination: {
        page: 1,
        size: 10,
        total: 100
      },
      addObj: {
        account: '',
        password: '',
        name: '',
        unit: '',
        department: '',
        phone: '',
        email: '',
        permission: []
      },
      sortObj: {}
    }
  },
  mounted() {
    this.loadData();
  },
  methods: {
    computeTableIndex(index) {
      return (this.pagination.page - 1) * this.pagination.size + index + 1
    },
    handleSort({ column, prop, order }) {
      this.sortObj = {
        field: prop,
        sort: order && order.substr(0, order.length - 6) || ''
      }
      this.handleCurrentChange(1)
    },
    loadData() {
      const param = {
        pageSize: this.pagination.size,
        page: this.pagination.page,
        query: this.searchText,
        ...this.sortObj
      }
      this.loading = true
      API.getUserList(param).then(res => {
        this.loading = false
        this.tableData = res.data.items
        this.pagination.total = res.data.total
      }).catch(err => {
        this.loading = false
        console.log(err)
      })
    },
    handleClick() { },
    handleIconClick() {
      console.log(1111)
    },
    handleSizeChange(v) {
      this.pagination.size = v
      this.loadData()
    },
    handleCurrentChange(v) {
      this.pagination.page = v
      this.loadData()
    },
    handleSelectionChange(array) {
      this.selections = array
    },
    handleDelete() {
      this.$confirm('删除所选项, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.batchDelete()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    batchDelete() {
      const ids = this.selections.map((s) => s.id)
      API.deleteUsers(ids.join(',')).then(() => {
        this.loadData()
      })
    },
    handleSubmit() {
      const param = { ...this.addObj }
      this.loading = true
      if (!param.id) {
        API.addUser(param).then(res => {
          this.visible = false
          this.loading = false
          this.loadData()
        })
      } else {
        API.updateUser(param).then(res => {
          this.visible = false
          this.loading = false
          this.loadData()
        })
      }
    },
    handleEdit(row) {
      this.visible = true
      this.addObj = { ...row }
    },
    resetForm() {
      Object.keys(this.addObj).forEach(k => {
        if (this.addObj[k] instanceof Array) this.addObj[k] = []
        else if (typeof (this.addObj[k]) === 'string') this.addObj[k] = ''
        else this.addObj[k] = null
      })
    },
    resetPassword() {

    }
  }
}
</script>

<style lang="scss" scoped>
#actor {
  width: 100%;
  min-height: 100%;
  padding: 15px;
  header {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    .left {
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
  }
  main {
    padding: 10px 0;
  }
  footer {
    text-align: right;
  }
  .form-item {
    width: calc((99% - 20px) / 2);
    float: left;
  }
  /deep/ .table-header {
    padding: 0 6px;
  }
  /deep/ .el-table td,
  .el-table th {
    padding: 0;
  }
  /deep/ .el-table .cell,
  .el-table th div {
    padding: 6px 0;
  }
  /deep/ .el-dialog__body {
    padding: 10px 20px;
  }
}
</style>
